<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>My App</title>
    <link rel="stylesheet" href="../../packages/core/css/framework7.min.css">
    <link rel="stylesheet" href="../../css/framework7-icons.css">
  </head>
  <body>
    <div id="app"></div>
    <template id="app-template">
      <f7-app>
        <f7-view main>
          <f7-page>
            <f7-navbar title="Cards"></f7-navbar>
            <f7-block-title>Simple Cards</f7-block-title>
            <f7-card
              content="This is a simple card with plain text, but cards can also contain their own header, footer, list view, image, or any other element."
            ></f7-card>
            <f7-card
              title="Card header"
              content="Card with header and footer. Card headers are used to display card titles and footers for additional information or just for custom actions."
              footer="Card footer"
            ></f7-card>
            <f7-card
              content="Another card. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse feugiat sem est, non tincidunt ligula volutpat sit amet. Mauris aliquet magna justo. "
            ></f7-card>
      
            <f7-block-title>Outline Cards</f7-block-title>
            <f7-card
              outline
              content="This is a simple card with plain text, but cards can also contain their own header, footer, list view, image, or any other element."
            ></f7-card>
            <f7-card
              outline
              title="Card header"
              content="Card with header and footer. Card headers are used to display card titles and footers for additional information or just for custom actions."
              footer="Card footer"
            ></f7-card>
            <f7-card
              outline
              content="Another card. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse feugiat sem est, non tincidunt ligula volutpat sit amet. Mauris aliquet magna justo. "
            ></f7-card>
      
            <f7-block-title>Styled Cards</f7-block-title>
            <f7-card class="demo-card-header-pic">
              <f7-card-header
                class="no-border"
                valign="bottom"
                style="background-image:url(http://lorempixel.com/1000/600/nature/3/)"
              >Journey To Mountains</f7-card-header>
              <f7-card-content>
                <p class="date">Posted on January 21, 2015</p>
                <p>Quisque eget vestibulum nulla. Quisque quis dui quis ex ultricies efficitur vitae non felis. Phasellus quis nibh hendrerit...</p>
              </f7-card-content>
              <f7-card-footer>
                <f7-link>Like</f7-link>
                <f7-link>Read more</f7-link>
              </f7-card-footer>
            </f7-card>
            <f7-card class="demo-card-header-pic">
              <f7-card-header
                class="no-border"
                valign="bottom"
                style="background-image:url(http://lorempixel.com/1000/600/people/6/)"
              >Journey To Mountains</f7-card-header>
              <f7-card-content>
                <p class="date">Posted on January 21, 2015</p>
                <p>Quisque eget vestibulum nulla. Quisque quis dui quis ex ultricies efficitur vitae non felis. Phasellus quis nibh hendrerit...</p>
              </f7-card-content>
              <f7-card-footer>
                <f7-link>Like</f7-link>
                <f7-link>Read more</f7-link>
              </f7-card-footer>
            </f7-card>
      
            <f7-block-title>Facebook Cards</f7-block-title>
            <f7-card class="demo-facebook-card">
              <f7-card-header class="no-border">
                <div class="demo-facebook-avatar"><img src="http://lorempixel.com/68/68/people/1/" width="34" height="34"/></div>
                <div class="demo-facebook-name">John Doe</div>
                <div class="demo-facebook-date">Monday at 3:47 PM</div>
              </f7-card-header>
              <f7-card-content :padding="false">
                <img src="http://lorempixel.com/1000/700/nature/8/" width="100%"/>
              </f7-card-content>
              <f7-card-footer class="no-border">
                <f7-link>Like</f7-link>
                <f7-link>Comment</f7-link>
                <f7-link>Share</f7-link>
              </f7-card-footer>
            </f7-card>
            <f7-card class="demo-facebook-card">
              <f7-card-header class="no-border">
                <div class="demo-facebook-avatar"><img src="http://lorempixel.com/68/68/people/1/" width="34" height="34"/></div>
                <div class="demo-facebook-name">John Doe</div>
                <div class="demo-facebook-date">Monday at 2:15 PM</div>
              </f7-card-header>
              <f7-card-content>
                <p>What a nice photo i took yesterday!</p><img src="http://lorempixel.com/1000/700/nature/8/" width="100%"/>
                <p class="likes">Likes: 112 &nbsp;&nbsp; Comments: 43</p>
              </f7-card-content>
              <f7-card-footer class="no-border">
                <f7-link>Like</f7-link>
                <f7-link>Comment</f7-link>
                <f7-link>Share</f7-link>
              </f7-card-footer>
            </f7-card>
      
            <f7-block-title>Cards With List View</f7-block-title>
            <f7-card>
              <f7-card-content :padding="false">
                <f7-list>
                  <f7-list-item link="#">Link 1</f7-list-item>
                  <f7-list-item link="#">Link 2</f7-list-item>
                  <f7-list-item link="#">Link 3</f7-list-item>
                  <f7-list-item link="#">Link 4</f7-list-item>
                  <f7-list-item link="#">Link 5</f7-list-item>
                </f7-list>
              </f7-card-content>
            </f7-card>
            <f7-card title="New Reelases">
              <f7-card-content :padding="false">
                <f7-list medial-list>
                  <f7-list-item
                    title="Yellow Submarine"
                    subtitle="Beatles"
                  >
                    <img slot="media" src="http://lorempixel.com/88/88/fashion/4" width="44"/>
                  </f7-list-item>
                  <f7-list-item
                    title="Don't Stop Me Now"
                    subtitle="Queen"
                  >
                    <img slot="media" src="http://lorempixel.com/88/88/fashion/5" width="44"/>
                  </f7-list-item>
                  <f7-list-item
                    title="Billie Jean"
                    subtitle="Michael Jackson"
                  >
                    <img slot="media" src="http://lorempixel.com/88/88/fashion/6" width="44"/>
                  </f7-list-item>
                </f7-list>
              </f7-card-content>
              <f7-card-footer>
                <span>January 20, 2015</span>
                <span>5 comments</span>
              </f7-card-footer>
            </f7-card>
          </f7-page>
        </f7-view>
      </f7-app>
      
    </template>
    <style>
      .demo-card-header-pic .card-header {
        height: 40vw;
        background-size: cover;
        background-position: center;
        color: #fff;
      }
      .demo-card-header-pic .card-content-padding .date{
        color: #8e8e93;
      }
      .demo-facebook-card .card-header {
        display: block;
        padding: 10px;
      }
      .demo-facebook-card .demo-facebook-avatar {
        float: left;
      }
      .demo-facebook-card .demo-facebook-name {
        margin-left: 44px;
        font-size: 14px;
        font-weight: 500;
      }
      .demo-facebook-card .demo-facebook-date {
        margin-left: 44px;
        font-size: 13px;
        color: #8e8e93;
      }
      .demo-facebook-card .card-footer {
        background: #fafafa;
      }
      .theme-dark .demo-facebook-card .card-footer {
        background-color: transparent;
      }
      .demo-facebook-card .card-footer a {
        color: #81848b;
        font-weight: 500;
      }
      .demo-facebook-card .card-content img {
        display: block;
      }
      .demo-facebook-card .card-content-padding {
        padding: 15px 10px;
      }
      .demo-facebook-card .card-content-padding .likes {
        color: #8e8e93;
      }
      
    </style>
    <script>var component = {}</script>
    <script src="../../packages/vue/vue.min.js"></script>
    <script src="../../packages/vue/framework7-vue.min.js"></script>
    <script src="../../packages/core/js/framework7.min.js"></script>
    <script>
      var theme = 'ios';
      if (location.href.indexOf('theme=md') >= 0) theme = 'md';
      
      if (Framework7.use) Framework7.use(Framework7Vue, { theme: theme });
      else if (Framework7.Class && Framework7.Class.use) Framework7.Class.use(Framework7Vue, { theme: theme });
      
      var plugin = {
        params: {
          theme: theme,
        }
      };
      
      if (Framework7.use) Framework7.use(plugin);
      else if (Framework7.Class && Framework7.Class.use) Framework7.Class.use(plugin);
      
      if (typeof component === 'undefined') {
        var component = {};
      }
      if (typeof routes === 'undefined') {
        var routes = [];
      }
      component.el = '#app';
      component.template = '#app-template';
      
      new Vue(component);
    </script>
  </body>
</html>